<template>
  <div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
      </template>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="收货人">
              <el-input v-model="searchObject.name" placeholder="收货人" name="name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="联系电话">
              <el-input v-model="searchObject.phone" placeholder="联系电话" name="phone">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding: 0 10px;">
            <el-row type="flex" justify="end">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button plain @click="clearSearch">清除条件</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="">
          全部
        </el-menu-item>
        <el-menu-item index="1">
          待付款
        </el-menu-item>
        <el-menu-item index="2">
          待发货
        </el-menu-item>
        <el-menu-item index="3">
          待收货
        </el-menu-item>
        <el-menu-item index="4">
          待评价
        </el-menu-item>
        <el-menu-item index="5">
          已完成
        </el-menu-item>
      </el-menu>
      <div class="tool-add" style="margin-top: 10px;">
      </div>

      <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort"
                style="width: 100%;font-size: 12px;">

        <el-table-column type="expand">
          <template #default="props">
            <h3>商品信息</h3>
            <el-table :data="props.row.items">
              <el-table-column label="商品图片" prop="id" width="100">
                <template #default="scope">
                  <img alt="" :src="scope.row.logo" style="width:50px;height:50px;"/>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="name" width="200">
              </el-table-column>
              <el-table-column label="价格" prop="price" width="100">
              </el-table-column>
              <el-table-column label="数量" prop="num" width="100">
              </el-table-column>
              <el-table-column label="小计" prop="total" width="100">
              </el-table-column>

            </el-table>
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="收货人">
                <span>{{ props.row.consignee }}</span>
              </el-form-item>
              <el-form-item label="联系电话">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="收货地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="下单时间">
                <span>{{ props.row.createDate }}</span>
              </el-form-item>
              <el-form-item label="备注">
                <span>{{ props.row.note }}</span>
              </el-form-item>
            </el-form>
            <div style="margin-top: 15px;">
              共件{{ props.row.num }}商品，运费{{ props.row.freight }},合计￥{{ props.row.amount }}元
            </div>
          </template>
        </el-table-column>
        <el-table-column label="下单人" prop="consignee"
                         width="100">
        </el-table-column>
        <el-table-column label="联系电话" prop="phone"
                         width="120">
        </el-table-column>
        <el-table-column label="订单状态" prop="stateName"
                         width="100">
        </el-table-column>
        <el-table-column label="订单数量" prop="num"
                         width="100">
        </el-table-column>
        <el-table-column label="订单金额" prop="amount"
                         width="100">
        </el-table-column>
         <el-table-column label="支付单号" prop="payNo"  width="260">
        </el-table-column>
        <el-table-column label="添加时间" prop="createDate"
        >
        </el-table-column>
        <el-table-column width="210" align="center" fixed="right" label="操作">
          <template #default="scope">
            <el-dropdown @command="changeMenu(scope.row, $event)" :transfer="true" style="cursor: pointer ;">
              <el-button text type="primary"> 更多</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="0">订单详情</el-dropdown-item>
                  <el-dropdown-item command="1" v-if="scope.row.state === 1">确认付款</el-dropdown-item>
                  <el-dropdown-item command="3" v-if="scope.row.state === 2">订单发货</el-dropdown-item>
                  <el-dropdown-item command="4">已收货</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageData.size" :pager-count="5"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                       :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>

    <order_detail v-model="showDetail" :order-data="orderData"></order_detail>

    <send_order v-model="showSendOrder" :order-data="orderData" @success="search"></send_order>

  </div>
</template>

<script setup>
import {defineStore} from 'pinia'
import {useDelete} from "@/utils/useDelete";
import {useView} from "@/utils/useView";
import {provide, ref} from "vue";
import {usePageData} from "@/uses/usePageData";
import Order_detail from "@/views/pages/order/components/order_detail.vue";
import Send_order from "@/views/pages/order/components/send_order.vue";

const showDetail = ref(false);
const showSendOrder = ref(false);



const orderData = ref({})
const hello = ref(null);

const searchStore = defineStore('orderStore', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 10,
        sortField: "id",
        sortMethod: "desc",
        name: null,
        state: null,
        phone: null
      }
    }
  }
})

const {searchObject} = searchStore();

const clearSearch = () => {
  searchObject.name = null;
  searchObject.phone = null;
  searchObject.state = null;
}
const {
  pageData,
  sizeChange,
  pageChange,
  search,
  changeTableSort,
  loading
} = usePageData("admin_order_search", searchObject);
const {dialogVisible, deleteData, handleDelete} = useDelete("/order/delete", search);
const {showView, addView, editView} = useView();


const activeIndex = ref("");

const handleSelect = (index) => {
  searchObject.state = index;
  search();
}

const changeMenu = (row, name) => {
  orderData.value = row;
  if (name === "0") {
    showDetail.value = true;
  } else if (name === "1") {
    callChildMethod();
  }else if (name === "3") {
    showSendOrder.value=true;
  }

}

// 通过 inject 获取子组件提供的方法


const callChildMethod = () => {
  console.info("callChildMethod");
  if (hello.value) {
    hello.value.childMethod(); // 调用子组件的方法
  }
  count.value=count.value+1;

};

const count=ref(0)
provide('count', count);

</script>

<style scoped>
</style>
